<template>
  <div class="chart-item">
    <div v-if="lineData.length === 0" class="inbot"><el-empty/></div>
    <div ref="canvas" style="height:100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      myChart: null
    }
  },
  computed: {
    lineData () {
      return [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
    }
  },
  watch: {
    lineData () {
      this.renderChart()
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.canvas)
    this.renderChart()
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    renderChart () {
      const vdata = []
      const xdata = []
      this.lineData.forEach(item => {
        xdata.push(item[0])
        vdata.push(item[1])
      })
      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          position: 'top',
          padding: [3, 15],
          formatter: '{c}',
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgb(61, 90, 241)',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 0,
          right: 0,
          top: 8,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          axisLine: { show: false },
          axisTick: { show: false },
          data: xdata
        },
        // 字符串去掉最后三位
        yAxis: {
          scale: true,
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgb(235, 237, 244)',
              type: 'dashed'
            }
          },
          axisLine: { show: false }
        },
        series: [
          {
            z: 1,
            data: vdata,
            color: 'rgb(61, 90, 241)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(61, 90, 241, 0.4)'
                }, {
                  offset: 1,
                  color: 'rgba(61, 90, 241, 0)'
                }
              ])
            }
          },
          {
            z: 2,
            data: vdata,
            type: 'bar',
            barWidth: '100%',
            color: 'rgba(0,0,0,0)',
            label: {
              show: true,
              position: 'top',
              formatter: '{a|}',
              rich: {
                a: {
                  backgroundColor: 'rgba(0,0,0,0)',
                  borderRadius: 20,
                  height: 6,
                  width: 6
                }
              },
              offset: [0, 8]
            },
            emphasis: {
              label: {
                color: 'rgba(0,0,0, 1)',
                rich: {
                  a: {
                    backgroundColor: 'blue',
                    borderRadius: 20,
                    borderWidth: 4,
                    borderColor: '#fff',
                    height: 6,
                    width: 6
                  }
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>
